<script lang="jsx" setup>
import { computed, nextTick, ref } from 'vue';
import Table from '@/components/common/table.vue';
import CommonSearch from '@/components/common/common-search.vue';
import Modal from '@/components/common/modal.vue';
import List from './modules/list.vue';

const commonSearchRef = ref(null);
const tableRef = ref(null);
const searchParams = ref({
  prodNo: null,
  time: null
});

const searchFormList = [
  {
    type: 'input',
    key: 'prodNo',
    label: '生产型号',
    placeholder: '请输入生产型号',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 6
  },
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '日期',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6
  }
];

const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'prodNo',
    dataIndex: 'prodNo',
    title: '生产型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180,
    customRender: ({ record }) => {
      return (
        <a class="color-blue" onClick={() => handleListOpen(record)}>
          {record.prodNo}
        </a>
      );
      // return <Button type="link" >{record.moldNo}</Button>;
    }
  },
  {
    key: 'type',
    dataIndex: 'type',
    title: '测试架类型',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'testStandId',
    dataIndex: 'testStandId',
    title: '测试架编码',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'stateStr',
    dataIndex: 'stateStr',
    title: '状态',
    align: 'center',
    checked: true,
    ellipsis: true
  },

  {
    key: 'totalCount',
    dataIndex: 'totalCount',
    title: '总使用次数',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'location',
    dataIndex: 'location',
    title: '存放位置',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '申请人',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '申请日期',
    align: 'center',
    checked: true,
    ellipsis: true
  }
];

const searchData = computed(() => {
  const params = {
    ...searchParams.value
  };
  if (searchParams.value?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD');
  }
  delete params.time;
  return params;
});

function search() {
  tableRef.value.getData(1);
}

function reset() {
  nextTick(() => {
    searchParams.value = {
      keywords: null,
      noticeState: null
    };
    search();
  });
}

function getBg(record) {
  if (record.totalCount > 200000) {
    return {
      backgroundColor: 'rgb(155, 240, 217)'
    };
  }
  if (record.totalCount > 190000 && record.totalCount < 195000) {
    return {
      backgroundColor: 'rgb(239, 239, 136)'
    };
  }

  if (record.totalCount > 195000 && record.totalCount < 200000) {
    return {
      backgroundColor: 'rgb(247, 109, 109)'
    };
  }
  return {};
}

const tableCustomRow = record => {
  return {
    style: getBg(record)
  };
};

const currentRowId = ref(null);
const modalListVisible = ref(false);
function handleListOpen(row) {
  currentRowId.value = row.testStandId;
  modalListVisible.value = true;
}

function handleListClose() {
  modalListVisible.value = false;
}
</script>

<template>
  <div class="mold-management-page min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>

    <Table
      ref="tableRef"
      v-model:searchParams="searchData"
      :column="column"
      :show-row-selection="false"
      :page-size="200"
      row-key="testStandId"
      class="mold-management-table"
      :scroll="{ y: 'auto' }"
      is-init-get-data
      :table-custom-row="tableCustomRow"
      url="/qms/agv/frock/testStand/list"
    >
      <template #footer>
        <div class="titClass w-full flex gap-15px">
          <div class="flex items-center">
            <span>背景色为</span>
            <span
              class="bg-1 ml-3px mr-3px inline-block h20px w20px"
              style="background-color: rgb(155, 240, 217)"
            ></span>
            <span>是总使用次数大于200000次</span>
          </div>
          <div class="flex items-center">
            <span>背景色为</span>
            <span
              class="bg-2 ml-3px mr-3px inline-block h20px w20px"
              style="background-color: rgb(239, 239, 136)"
            ></span>
            <span>是总使用次数:190001-195000次</span>
          </div>
          <div class="flex items-center">
            <span>背景色为</span>
            <span
              class="bg-3 ml-3px mr-3px inline-block h20px w20px"
              style="background-color: rgb(247, 109, 109)"
            ></span>
            <span>是总使用次数195001-200000次</span>
          </div>
        </div>
      </template>
    </Table>
    <!-- 新增修改 -->

    <Modal
      v-model:visible="modalListVisible"
      title="记录"
      width="80vw"
      height="70vh"
      :centered="true"
      :destroy-on-close="true"
      @close="handleListClose"
    >
      <List :test-stand-id="currentRowId"></List>
      <template #footer>
        <div></div>
      </template>
    </Modal>
  </div>
</template>

<style lang="scss">
.titClass {
  .bg-1 {
    background-color: rgb(155, 240, 217);
  }

  .bg-2 {
    background-color: rgb(239, 239, 136);
  }

  .bg-3 {
    background-color: rgb(247, 109, 109);
  }
}
</style>
